<template>
  <ve-card :title="record.orderCode" :noneCaseSubTitle="record.orderStatusName">
    <ve-cell-val label="承租人姓名" :value="record.memberName" />
    <ve-cell-val label="承租人电话" :value="record.memberPhone" />
    <ve-cell-val label="车牌号" :value="record.carLicenseNo" />
    <ve-cell label="租赁周期"> {{ record.startTime }} - {{ record.endTime }} </ve-cell>
    <ve-cell label="押金">
      <view>
        <block v-for="item in record.depositDtos" :key="item.id">
          <ve-tag v-bind="getTagColor(item.depositStatus)" :title="item.depositStatusName" />
          <view class="tag-item-text">{{ item.depositTypeName }}：{{ item.changeAmount }} 元</view>
        </block>
      </view>
    </ve-cell>
    <ve-cell-val label="押金预计解冻日期" :value="formatDate(record.planThawTime)" />
  </ve-card>
</template>
<script setup lang="ts">
  import dayjs from 'dayjs'
  defineProps({
    record: {
      type: Object,
      default: () => ({}),
    },
  })
  const formatDate = (date: string) => {
    return date ? dayjs(date).format('YYYY-MM-DD') : ''
  }
  const getTagColor = (status: number | string) => {
    switch (status) {
      // 应收未收
      case 10:
        return { background: '#FFF7E8', color: '#FF7D00' }
      // 应收已收
      case 30:
        return { background: '#E8FFEA', color: '#00B42A' }
      // 应退未退
      case 50:
        return { background: '#FFECE8', color: '#F53F3F' }
      // 应退已退
      case 70:
        return { background: '#E8F7FF', color: '#3491FA' }
      // 已作废
      case 90:
        return { background: '#F2F3F5', color: '#1D2129' }
      default:
        return { background: '#F2F3F5', color: '#1D2129' }
    }
  }
</script>
<style lang="scss" scoped>
  :deep(.fillet-label .title) {
    border-radius: 4rpx;
  }
  .tag-item-text {
    margin-top: 8rpx;
    font-weight: 400;
    font-size: 30rpx;
    color: #191c27;
  }
</style>
